<template>
  <div>
    <Header :left="true" leftText="返回" title="产品外观检测查询"> </Header>
    <NoticeBar color="#1989fa" background="#ecf9ff" style="margin-top: 5px; font-size: 15px; font-weight: bold"
      left-icon="description">查询条件</NoticeBar>
    <div>
      <Form :style="autoHeight">
        <van-field label="生产日期选择" class="formstyle" placeholder="请选择日期" is-link :value="form.ProductionDate"
          @click="showProductionDate = true" />
        <van-calendar :min-date="minDate" color="#1989fa" v-model="showProductionDate"
          @confirm="onConfirmProductionDate" />

        <van-field readonly disabled label="抽检时间选择" class="formstyle" placeholder="请选择日期" is-link
          :value="form.planworkdatetime" @click="showdate = false" />
        <van-calendar readonly :min-date="minDate" color="#1989fa" v-model="showdate" @confirm="onConfirm" />


        <van-field readonly class="formstyle" name="picker" :value="valuepline" label="生产线选择" placeholder="请选择选择产线"
          @click="showPickerpline = true" />
        <van-popup v-model="showPickerpline" position="bottom">
          <van-picker show-toolbar :columns="columnspline" @confirm="onConfirmpline" @cancel="showPickerpline = false">
            <template #option="option">
              <div style="
                  display: flex;
                  flex-direction: column;
                  align-items: center;
                ">
                <div>{{ option.plineName }}</div>
              </div>
            </template>
          </van-picker>
        </van-popup>
        <van-field class="formstyle" v-model="form.POrderID" name="订单号" label="订单号" placeholder="输入订单号" />
        <van-field class="formstyle" v-model="form.MaterialID" name="产品代码" label="产品代码" placeholder="输入产品代码" />
        <van-field class="formstyle" v-model="form.MaterialName" name="产品名称" label="产品名称" placeholder="输入产品名称" />
      </Form>
    </div>

    <div style="margin-top: 10px; margin-bottom: 10px">
      <van-button type="primary" class="buttongroup" @click="operatedetail" color="#138087">查询</van-button>
    </div>
    <!-- <div class="textScroll"> -->
    <!-- 循环数据开始 -->
    <div v-for="item in items" :key="item.Id" style="margin-top: 10px">
      <div class="divStyle" v-if="showData">
        <van-cell icon="circle" style="font-weight: bold; font-size: 16px; color: black" @click="modifydata(item)">
          <van-row style="margin-left: 10px; margin-top: 10px">
            <van-col span="18">【检验类型】:{{ showCheckType(item.CheckTypeID) }}</van-col>
          </van-row>
          <van-row style="margin-left: 10px; margin-top: 10px">
            <van-col span="18">【订单号码】:{{ item.POrderID }}</van-col>
          </van-row>
          <van-row style="margin-left: 10px; margin-top: 10px">
            <van-col span="18">【产品代码】:{{ item.MaterialID }}</van-col>
          </van-row>
          <van-row style="margin-left: 10px; margin-top: 10px">
            <van-col span="18">【产品名称】:{{ item.MaterialName }}</van-col>
          </van-row>
          <van-row style="margin-left: 10px; margin-top: 10px">
            <van-col span="18">【生产批次】:{{ item.BatchID }}</van-col>
          </van-row>
          <van-row style="margin-left: 10px; margin-top: 10px">
            <van-col span="18">【抽检时间】:{{ item.WorkPlanDatetimeFrom }}</van-col>
          </van-row>
        </van-cell>
      </div>
      <div style="width: 100%; background-color: #f3f4f8; height: 5px">
        <span></span>
      </div>
    </div>
    <!-- 循环数据结束 -->
    <!-- </div> -->
  </div>
</template>

<script>
import {
  Col,
  Row,
  Form,
  Cell,
  Icon,
  Field,
  NumberKeyboard,
  Image as VanImage,
  Picker,
  popup,
  SubmitBar,
  Button,
  Loading,
  Overlay,
  Dialog,
  Toast,
  NoticeBar,
  Tag,
  DatetimePicker,
  ImagePreview,
  CellGroup,
  Uploader,
  Cascader,
  Calendar,
  RadioGroup,
  Radio,
  Divider,
  Stepper,
  AddressList,
  Checkbox,
  CheckboxGroup,
} from "vant";

import "vue-easytable/libs/themes-base/index.css";
import { VTable } from "vue-easytable";
import { _httpClient } from "@/libs/apisie";
import { _httpClient as _httpClientApi } from "@/libs/api";
import { getToken, getBaseApiFrefix } from "@/libs/auth";
import Header from "@/components/header.vue";
import { storage } from "@/libs/utils";

Vue.use(Field);
Vue.use(Overlay);
Vue.use(Loading);
Vue.use(Picker);
Vue.use(popup);
Vue.use(SubmitBar);
Vue.use(VanImage);
Vue.use(DatetimePicker);
Vue.use(Cascader);
Vue.use(Calendar);
Vue.use(Cell);
Vue.use(RadioGroup);
Vue.use(Radio);
Vue.use(Divider);
Vue.use(Stepper);
Vue.use(Button);
Vue.use(AddressList);
Vue.use(Checkbox);
Vue.use(CheckboxGroup);
Vue.use(Col);
Vue.use(Row);

export default {
  name: "qCrecord",
  components: {
    Row,
    Col,
    Button,
    Header,
    Form,
    Cell,
    Icon,
    Field,
    NumberKeyboard,
    Dialog,
    Toast,
    NoticeBar,
    Row,
    Tag,
    popup,
    DatetimePicker,
    ImagePreview,
    CellGroup,
    Uploader,
    Col,
    Calendar,
    Cascader,
    Picker,
    RadioGroup,
    Radio,
    Divider,
    Stepper,
    VTable,
    AddressList,
    Checkbox,
    CheckboxGroup,
  },
  data() {
    return {
      columnspline: [
        { plineId: "01", plineName: "机台一" },
        { plineId: "02", plineName: "机台二" },
        { plineId: "03", plineName: "机台三" },
      ],
      showPickerpline: false,
      columnsManageReason: [
        { ManageReasonID: "0", ManageReasonName: "无异常" },
      ],
      columnsQProblem: [{ QProblemID: "0", QProblemName: "无异常" }],
      showPickerWorkshopId: false,
      showPickerManageReason: false,
      result: [],
      items: [], //查询数据项
      columnsWorkshop: [],
      columnsType: [],
      valueWorkshopId: "",
      ManageReasonName: "",
      date: "",
      showdate: false,
      companyname: "",
      minDate: new Date(2021, 12, 1),
      form: {
        planworkdatetime: "",
        WorkshopID: "",
        plineid: "",
        POrderID: "",
        MaterialID: "",
        MaterialName: "",
        ProductionDate: "",
      },
      valuepline: "",
      user: [],
      showData: false,
      showPickerQProblem: false,
      showProductionDate: false,
    };
  },

  created: function () {
    this.user = JSON.parse(storage.get("user"));
    var myDate = new Date();
    this.form.planworkdatetime = "";
    // myDate.getFullYear() +
    // "-" +
    // (myDate.getMonth() + 1) +
    // "-" +
    // (myDate.getDate());
    //获取部门明细
    this.companyname = this.user.dept.deptName;
    //获取检验类型
    this.getCheckType();
    this.getManageReasonID();
    this.getQualityProblems();
    this.getWorkshop();
    this.getPline();
  },
  mounted() { },
  methods: {
    showManageReason(ManageReason) {
      let result = ManageReason;
      if (ManageReason == "" || null == ManageReason) {
        ManageReason = "0";
      }
      this.columnsManageReason.forEach((item) => {
        if (item.ManageReasonID == ManageReason) {
          result = item.ManageReasonName;
        }
      });
      return result;
    },
    //获取生产线
    async getPline() {
      let _this = this;
      try {
        let res = await _httpClient.get(
          _httpClient.getApiPrefix() +
          "/PLineEquipment/GetList?FactoryID=TC00" /* + _this.user.site */
        );
        if (res.HttpCode === "200") {
          let teamMap = res.Data.map((item) => ({
            plineId: item.PLineID,
            plineName: item.PLineName,
          }));
          _this.columnspline = teamMap;
        }
      } catch (e) {
        Toast.fail(JSON.stringify(e));
      }
    },
    //获取车间信息
    async getWorkshop() {
      let _this = this;
      try {
        let res = await _httpClient.get(
          _httpClient.getApiPrefix() + "/Workshop/GetList"
        );
        if (res.HttpCode === "200") {
          let shiftMap = res.Data.map((item) => ({
            WorkshopName: item.WorkshopName,
            WorkshopID: item.WorkshopID,
          }));
          _this.columnsWorkshop = shiftMap;
        }
      } catch (e) {
        Toast.fail(JSON.stringify(e));
      }
    },
    //获取管理责任
    async getManageReasonID() {
      let _this = this;
      try {
        let res = await _httpClient.get(
          _httpClient.getApiPrefix() + "/QualityManageReason/GetList"
        );
        if (res.HttpCode === "200") {
          _this.columnsManageReason = res.Data.map((item) => ({
            ManageReasonID: item.ManageReasonID,
            ManageReasonName: item.ManageReasonName,
          }));
        }
      } catch (e) {
        Toast.fail(JSON.stringify(e));
      }
    },

    showQProblemID(QProblemID) {
      let value = QProblemID;
      if (QProblemID == "" || null == QProblemID) {
        QProblemID = "0";
      }
      this.columnsQProblem.forEach((item) => {
        if (item.QProblemID === QProblemID) {
          value = item.QProblemName;
        }
      });
      return value;
    },
    //获取缺陷原因
    async getQualityProblems() {
      let _this = this;
      try {
        let res = await _httpClient.get(
          _httpClient.getApiPrefix() + "/QualityProblems/GetList"
        );

        if (res.HttpCode === "200") {
          _this.columnsQProblem = res.Data.map((item) => ({
            QProblemID: item.QProblemID,
            QProblemName: item.QProblemName,
          }));
        }
      } catch (e) {
        Toast.fail(JSON.stringify(e));
      }
    },
    //获取检验类型
    async getCheckType() {
      let _this = this;
      try {
        let res = await _httpClient.get(
          _httpClient.getApiPrefix() + "/QualityCheckType/GetList"
        );
        if (res.HttpCode === "200") {
          let shiftMap = res.Data.map((item) => ({
            CheckTypeName: item.CheckTypeName,
            CheckTypeID: item.CheckTypeID,
          }));
          _this.columnsType = shiftMap;
        }
      } catch (e) {
        Toast.fail(JSON.stringify(e));
      }
    },

    onConfirmQProblem(value, index) {
      this.form.QProblemID = this.columnsQProblem[index].QProblemID;
      this.QProblemName = this.columnsQProblem[index].QProblemName;
      this.showPickerQProblem = false;
      if (this.form.QProblemID == "0" && this.form.ManageReasonID == "0") {
        this.valueQualityOk = "1";
        this.form.QualityOk = true;
      } else {
        this.valueQualityOk = "0";
        this.form.QualityOk = false;
      }
    },

    onConfirmWorkshopId(value, index) {
      this.valueWorkshopId = this.columnsWorkshop[index].WorkshopName;
      this.form.WorkshopID = this.columnsWorkshop[index].WorkshopID;
      this.showPickerWorkshopId = false;
    },
    showQualityOk(QualityOk) {
      let result = QualityOk;
      if (QualityOk) {
        result = "合格";
      } else {
        result = "不合格";
      }
      return result;
    },
    showCheckType(type) {
      let result = type;
      this.columnsType.forEach((item) => {
        if (item.CheckTypeID === result) {
          result = item.CheckTypeName;
        }
      });
      return result;
    },
    //根据⽣产线代码获取停机明细
    async operatedetail() {
      let _this = this;
      
      Toast.loading({
        mask: true,
        forbidClick: true,
        duration: 0,
        message: "请稍等...",
      });
      try {
        let res = await _httpClient.get(
          _httpClient.getApiPrefix() +
          "/QualityAppearanceCheck/GetList?WorkshopID=" +
          _this.form.WorkshopID +
          "&PLineID=" +
          _this.form.plineid +
          "&ProductionDate=" +
          _this.form.ProductionDate +
          "&POrderID=" +
          _this.form.POrderID +
          "&MaterialID=" +
          _this.form.MaterialID +
          "&MaterialName=" +
          _this.form.MaterialName
        );
        if (res.Data.length == 0) {
          Toast.clear();
          _this.items = [];
          Toast.fail("未查找到相关数据");
        } else {
          Toast.clear();
          Toast.success("查询完成");
          // alert(JSON.stringify(res.Data[0]))
          res.Data.sort((a,b)=>{

            // alert(b.CreateDatetime)
            if(b.CreateDatetime < a.CreateDatetime){
              return -1;
            }else if(b.CreateDatetime == a.CreateDatetime){
              return 0;
            }else if(b.CreateDatetime > a.CreateDatetime){
              return 1;
            }
          });
          _this.items = res.Data
          this.showData = true;
        }
      } catch (e) {
        Toast.fail(JSON.stringify(e));
      }
    },
    modifydata(val) {
      let _this = this;
      this.$ac.openWin({
        name: "quality-qCrecordItem",
        url: "./quality-qCrecordItem.html",
        pageParam: {
          item: val,
          columnsType: _this.columnsType,
          isShowButton: false,
        },
      });
      this.showData = false;
    },
    formatDate(date) {
      return `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
    },
    onConfirm(date) {
      this.showdate = false;
      this.form.planworkdatetime = this.formatDate(date);
    },
    onConfirmProductionDate(date) {
      this.showProductionDate = false;
      this.form.ProductionDate = this.formatDate(date);
    },
    onConfirmpline(value, index) {
      this.form.plineid = this.columnspline[index].plineId;
      this.valuepline = this.columnspline[index].plineName;
      this.showPickerpline = false;
    },
  },
};
</script>

<style>
body {
  background-color: white;
}

.table-title-class {
  background-color: #304156;
  color: #fff;
}

.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.buttongroup {
  float: right;
  width: 30%;
  margin-right: 10px;
  margin-top: 10px;
  margin-bottom: 20px;
}

.container.dwo {
  display: flex;
  justify-content: center;
  align-items: center;
}

.buttonLeft {
  position: fixed;
  bottom: 8px;
  float: left;
  width: 49%;
}

.formstyle {
  font-size: 15px;
  font-weight: bold;
  display: flex;
  align-items: center;
}

.radioteam {
  display: flex;
  align-items: center;
  padding-left: 13px;
  margin-top: 10px;
  margin-left: 34px;
  margin-bottom: 10px;
}

.buttonRight {
  position: fixed;
  bottom: 8px;
  float: right;
  left: 51%;
  width: 49%;
  background-color: #f22028;
  border-color: #f22028;
}

.textScroll {
  display: inline-block;
  position: fixed;
  top: 45%;
  bottom: 3rem;
  overflow: scroll;
  right: 10px;
  width: 100%;
  z-index: 1;
}

.message {
  font-size: 15px;
  margin-top: 5px;
  margin-left: -10px;
  font-weight: bold;
}

.mg5 {
  margin-right: 5px;
}

.tag_margin {
  margin: 2px 5px;
}

.card_under {
  height: 100%;
  width: 100%;
  margin: auto;
  background: #ffffff;
  border-radius: 25px;
  box-shadow: 0 0px 0px rgba(0, 0, 0, 0.3);
}

.card_icon {
  text-align: center;
  /* position: absolute; */
  height: 8rem;
  width: 80%;
  margin: 12% 10%;
  background: rgba(35, 180, 237, 1);
  border-radius: 25px;
  box-shadow: 0 10px 50px rgba(0, 0, 0, 0.3);
}

.text {
  font-size: 18px;
  color: #4e4a67;
  margin: 8px auto auto 20px;
  line-height: 1.5rem;
  text-align: justify;
  font-weight: 600;
}

.text_small {
  font-size: 16px;
  color: red;
  margin: 8px auto auto 20px;
  line-height: 1.5rem;
  text-align: justify;
  font-weight: 700;
}

.text_scan {
  font-size: 16px;
  color: #4e4a67;
  margin: auto auto auto 20px;
  line-height: 1.5em;
  text-align: justify;
}

.divStyle {
  margin-left: 3px;
  margin-right: 3px;
}
</style>
